<template>
    <div class="MenuWrap" ref="wrapper">
      <ul class="leftMenu">
        <li class="item"
            v-for="item of menuData"
            :key="item.id"
            @click="getData(item.id)"
            :class="{active: item.id === opened}"
        >
          <p class="title border-bottom">
            <span v-if="item.type === 2" class="notice__icon"></span>
            <span class="title__name">{{item.name}}</span>
          </p>
        </li>
      </ul>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'LeftMenu',
  data () {
    return {
      active: true
    }
  },
  props: {
    menuData: Array
  },
  methods: {
    getData (id) {
      this.$store.commit('changeOpenId', id)
    }
  },
  computed: {
    opened () {
      return this.$store.state.goods.opened
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new Bscroll(this.$refs.wrapper, {
        mouseWheel: true, click: true, tap: true
      })
    })
  }
}
</script>

<style lang='scss' scoped>
  @import '~@/assets/style/common';
  .MenuWrap {
    overflow: hidden;
    position: absolute;
    top: 348px;
    bottom: 96px;
    left: 0;
    right: 0;
    width: 162px;
    background: #f3f5f7;
  }
  .leftMenu {
    width: 100%;
    padding-bottom: 108px;
      .item {
        width: 100%;
        height: 108px;
        font-size: 24px;/*px*/
        color: rgb(77, 85, 93);
        padding: 0 24px;
        &.active {
          background: #fff;
        }
        .title {
          display: table-cell;
          width: 100%;
          height: 108px;
          line-height: 22px;
          vertical-align: middle;
          font-size: 0;
          &.border-bottom::before {
            border: 1px solid rgba(7, 17, 27, .1);
          }
          .title__name {
            font-size: 24px;
          }
        }
        .notice__icon {
          display: inline-block;
          height: 24px;
          width: 24px;
          margin-right: 2px;
          @include bg-image('../img/special_3');
          background-position: center;
          background-size: cover;
          vertical-align: -4px;
          line-height: 28px;
        }
      }
  }
  </style>
